<script lang="ts" setup>
import type {JcxFormSchema} from '@/components/effects/ui';
import type {Recordable} from '@/typings/effects';

import {computed, ref} from 'vue';

import {AuthenticationForgetPassword, z} from '@/components/effects/ui';
import {$t} from '@/locales/effects';

defineOptions({name: 'ForgetPassword'});

const loading = ref(false);

const formSchema = computed((): JcxFormSchema[] => {
  return [
    {
      component: 'JcxInput',
      componentProps: {
        placeholder: 'example@example.com',
      },
      fieldName: 'email',
      label: $t('authentication.email'),
      rules: z
          .string()
          .min(1, {message: $t('authentication.emailTip')})
          .email($t('authentication.emailValidErrorTip')),
    },
  ];
});

function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
}
</script>

<template>
  <AuthenticationForgetPassword
      :form-schema="formSchema"
      :loading="loading"
      @submit="handleSubmit"
  />
</template>
